<template>
  <div>
    <!-- 公用头部 -->
    <header-tab></header-tab>
    <!-- 头部下方图片开始 -->
    <div class="new_user_coupon">
      <img
        src="https://images.mafengwo.net/mobile/images/hotel/widgets/new_user_coupon_m_1802/coupon-banner-gif.gif"
        alt
      />
    </div>
    <!-- 头部下方图片结束 -->
    <!-- 目的地开始 -->
    <div class="hotel-find">
      <div class="hotel-find-center">
        <p>目的地</p>
        <router-link to="/hotelx">
          <div class="hotel-inp">
            <input
              type="text"
              placeholder="目的地/城市"
              :value="this.$store.state.site"
              disabled
            />
            <img src="~assets/icon/我的位置.png" alt />定位
          </div>
        </router-link>

        <!-- 入住选人 -->
        <div class="hotel-time">
          <div>
            <span>离店日期</span>
            <span>入店日期</span>
          </div>
          <!-- 选择日期开始 -->
          <van-cell title="选择日期区间" :value="date" @click="show = true" />
          <van-calendar v-model="show" type="range" @confirm="onConfirm" />
          <!-- 选择日期结束 -->
        </div>
        <van-button type="primary" size="large" @click="btn_hox"
          >查找酒店</van-button
        >
      </div>
    </div>
    <!-- 目的地结束 -->
    <!-- 中间三个选项开始 -->
    <van-row>
      <van-col span="8"> <van-icon name="coupon" />优惠券 </van-col>
      <van-col span="8"> <van-icon name="star" />酒店收藏 </van-col>
      <van-col span="8"> <van-icon name="card" />我的订单 </van-col>
    </van-row>
    <!-- 中间三个选项结束-->

    <!-- 下面全部 -->
    <div class="hotel-find-bottom">
      <!-- 主题推荐开始 -->
      <h1>主题推荐</h1>
      <van-tabs>
        <van-tab title="浪漫花海" name="a">
          <van-grid :border="false" :column-num="3">
            <van-grid-item>
              <van-image
                src="https://n1-q.mafengwo.net/s10/M00/0C/89/wKgBZ1l66EmAF1D9AAI47I0fyq0637.png?imageMogr2%2Fthumbnail%2F%21310x220r%2Fgravity%2FCenter%2Fcrop%2F%21310x220%2Fquality%2F90"
              />
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://p1-q.mafengwo.net/s10/M00/0C/89/wKgBZ1l66EmACd4bAAKNuq-P03A860.png?imageMogr2%2Fthumbnail%2F%21310x220r%2Fgravity%2FCenter%2Fcrop%2F%21310x220%2Fquality%2F90"
              />
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://b1-q.mafengwo.net/s10/M00/0C/8A/wKgBZ1l66EmAL8OPAAJgM7G9eM4660.png?imageMogr2%2Fthumbnail%2F%21310x220r%2Fgravity%2FCenter%2Fcrop%2F%21310x220%2Fquality%2F90"
              />
            </van-grid-item>
          </van-grid>
        </van-tab>
        <van-tab title="目的地特色" name="b">
          <van-grid :border="false" :column-num="3">
            <van-grid-item>
              <van-image
                src="https://p1-q.mafengwo.net/s10/M00/0C/87/wKgBZ1l66EiAMVBkAAILCNsPFT0454.png?imageMogr2%2Fthumbnail%2F%21310x220r%2Fgravity%2FCenter%2Fcrop%2F%21310x220%2Fquality%2F90"
              />
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://p1-q.mafengwo.net/s10/M00/0C/86/wKgBZ1l66EiAaqKBAAIIwq40Xzc787.png?imageMogr2%2Fthumbnail%2F%21310x220r%2Fgravity%2FCenter%2Fcrop%2F%21310x220%2Fquality%2F90"
              />
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://b1-q.mafengwo.net/s10/M00/0C/87/wKgBZ1l66EiAPmtqAAJGt1UmF4E175.png?imageMogr2%2Fthumbnail%2F%21310x220r%2Fgravity%2FCenter%2Fcrop%2F%21310x220%2Fquality%2F90"
              />
            </van-grid-item>
          </van-grid>
        </van-tab>
        <van-tab title="亲子之选" name="c">
          <van-grid :border="false" :column-num="3">
            <van-grid-item>
              <van-image
                src="https://b1-q.mafengwo.net/s10/M00/0C/84/wKgBZ1l66EiAH0cXAAGou7aN4LM722.png?imageMogr2%2Fthumbnail%2F%21310x220r%2Fgravity%2FCenter%2Fcrop%2F%21310x220%2Fquality%2F90"
              />
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://n1-q.mafengwo.net/s10/M00/0C/83/wKgBZ1l66EiAB0VgAAIdrL2xKyE960.png?imageMogr2%2Fthumbnail%2F%21310x220r%2Fgravity%2FCenter%2Fcrop%2F%21310x220%2Fquality%2F90"
              />
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://n1-q.mafengwo.net/s10/M00/0C/83/wKgBZ1l66EiARMSsAAJzLgBUfpM791.png?imageMogr2%2Fthumbnail%2F%21310x220r%2Fgravity%2FCenter%2Fcrop%2F%21310x220%2Fquality%2F90"
              />
            </van-grid-item>
          </van-grid>
        </van-tab>
        <van-tab title="迪士尼乐园" name="d">
          <van-grid :border="false" :column-num="3">
            <van-grid-item>
              <van-image
                src="https://b1-q.mafengwo.net/s10/M00/0C/8D/wKgBZ1l66EmAf3RQAAIF1-0B4J0279.png?imageMogr2%2Fthumbnail%2F%21310x220r%2Fgravity%2FCenter%2Fcrop%2F%21310x220%2Fquality%2F90"
              />
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://p1-q.mafengwo.net/s10/M00/0C/8C/wKgBZ1l66EmAY8ydAAH3xal5eJg638.png?imageMogr2%2Fthumbnail%2F%21310x220r%2Fgravity%2FCenter%2Fcrop%2F%21310x220%2Fquality%2F90"
              />
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://p1-q.mafengwo.net/s10/M00/0C/8E/wKgBZ1l66EmAdQSWAAHinTBBHDM467.png?imageMogr2%2Fthumbnail%2F%21310x220r%2Fgravity%2FCenter%2Fcrop%2F%21310x220%2Fquality%2F90"
              />
            </van-grid-item>
          </van-grid>
        </van-tab>
        <van-tab title="周末好去处" name="e">
          <van-grid :border="false" :column-num="3">
            <van-grid-item>
              <van-image
                src="https://p1-q.mafengwo.net/s10/M00/5E/84/wKgBZ1mC9HeAduFGAAGJ0Zy9twk523.png?imageMogr2%2Fthumbnail%2F%21310x220r%2Fgravity%2FCenter%2Fcrop%2F%21310x220%2Fquality%2F90"
              />
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://n1-q.mafengwo.net/s10/M00/5E/82/wKgBZ1mC9HeAXUOgAAGtWa5xIig995.png?imageMogr2%2Fthumbnail%2F%21310x220r%2Fgravity%2FCenter%2Fcrop%2F%21310x220%2Fquality%2F90"
              />
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://n1-q.mafengwo.net/s10/M00/5E/84/wKgBZ1mC9HeAOtbeAAGynSLxuYA442.png?imageMogr2%2Fthumbnail%2F%21310x220r%2Fgravity%2FCenter%2Fcrop%2F%21310x220%2Fquality%2F90"
              />
            </van-grid-item>
          </van-grid>
        </van-tab>
        <van-tab title="血拼购物" name="f">
          <van-grid :border="false" :column-num="3">
            <van-grid-item>
              <van-image
                src="https://b1-q.mafengwo.net/s10/M00/0C/8B/wKgBZ1l66EmATARLAAIyNkQ_RuE658.png?imageMogr2%2Fthumbnail%2F%21310x220r%2Fgravity%2FCenter%2Fcrop%2F%21310x220%2Fquality%2F90"
              />
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://n1-q.mafengwo.net/s10/M00/0C/8C/wKgBZ1l66EmAD-lDAAH99d7iilM872.png?imageMogr2%2Fthumbnail%2F%21310x220r%2Fgravity%2FCenter%2Fcrop%2F%21310x220%2Fquality%2F90"
              />
            </van-grid-item>
            <van-grid-item>
              <van-image
                src="https://n1-q.mafengwo.net/s10/M00/0C/8B/wKgBZ1l66EmAabPzAAK575eKfQA268.png?imageMogr2%2Fthumbnail%2F%21310x220r%2Fgravity%2FCenter%2Fcrop%2F%21310x220%2Fquality%2F90"
              />
            </van-grid-item>
          </van-grid>
        </van-tab>
      </van-tabs>
      <!-- 主题推荐结束 -->
    </div>
  </div>
</template>

<script>
export default {
  name: "hotel",
  data() {
    return {
      date: "",
      show: false,
    };
  },
  methods: {
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
    },

    // 根据选择的城市跳转
    btn_hox() {
      let id = this.$route.query.id;
      if (id != null && this.onConfirm) {
        this.$router.push({ path: "/jiudian", query: { id: id } });
      } else {
        this.$toast("请选择您想去的城市和日期");
      }
    },
  },
};
</script>

<style scoped>
* {
  color: #474747;
}
.new_user_coupon {
  width: 100%;
  height: 70px;
}
.new_user_coupon img {
  width: 100%;
}
.hotel-find {
  width: 100%;
  height: 220px;
  border: 1px solid transparent;
}
.hotel-find-center {
  width: 85%;
  height: 230px;
  margin: 7px auto 0;
}
.hotel-inp {
  width: 100%;
  height: 50px;
}
.hotel-inp input {
  width: 80%;
  font-size: 20px;
  margin: 13px 0 0 0;
  font-weight: 600;
}
.hotel-inp img {
  width: 25px;
}
.van-button {
  background: #ffba33;
  border: none;
}
.hotel-time {
  margin: 10px 0 0 0;
  width: 100%;
  height: 60px;
}
.hotel-time span {
  float: right;
  margin-right: 10px;
}
.van-row {
  text-align: center;
}
.hotel-find-bottom {
  width: 85%;
  margin: 3px auto;
}
.van-tabs__wrap--scrollable {
  padding: 0;
  margin: 0;
}
.van-image {
  width: 310px;
  height: 220px;
}
.van-cell {
  border: 1px solid #ffba33;
}
</style>
